.container
  .pull-right
    button.btn.btn-primary#toggle-all-component-code Toggle all code
  .clearfix

  .row
    .col-xs-3.index-column.nano
      ul.nav.nav-list.list-group.nano-content
        for component in components
            a.doc-name(href='#' + component.get('name'))
              li.list-group-item= component.get('system') + '.' + component.get('name')
              ul
                // .list-group for different layout
                each doc in (component.attributes.propertyDocumentation ? component.attributes.propertyDocumentation : [])
                  a(href='#' + component.get('name') + doc.name)
                    li.list-group-item
                      | #{doc.name}
    .col-xs-9.documentation-column.nano
      ul.nano-content
        for component in components
          div(id=component.get('name') class="panel panel-defalt")
            div(class="panel-heading")
              strong= component.get('system') + '.' + component.get('name')
            div(class="panel-body")
              | #{component.get('description')}
            ul
              each doc in (component.attributes.propertyDocumentation ? component.attributes.propertyDocumentation : [])
                li.list-group-item(id=component.get('name') + doc.name)
                  | #{doc.name}
                  ul.special-list
                    - let description = doc.description[codeLanguage] || doc.description.javascript || doc.description;
                    - try {
                    -   description = marked(description);
                    - }
                    - catch(err) {
                    -   console.error(component.get('name'), doc.name, 'has a problem with its', codeLanguage, 'description when rendering Markdown', description, err);
                    - }
                    li!=description
              li.panel-heading
                a.code-block(data-toggle="collapse" data-parent=('#' + component.get('name')) href=('#' + component.get('name') + 'Code'))
                  | Code
            div(id=(component.get('name') + 'Code') class="panel-collapse collapse")
              div.panel-body
                pre
                  | #{component.attributes.code}

      .clearfix
    .clearfix
  .clearfix
